<template>
  <div id="app">
    <h1>父组件标题</h1>
    <p>渲染信息:{{ msg }}</p>
    <p>渲染年级{{ age }}</p>
    <p>渲染子组件传来的数据:{{ vv }}</p>
    <button @click="changeNum">增加年龄</button>
    <hr />
    <HelloWorld @ccc="btnVal"></HelloWorld>
  </div>
</template>



<script>
import { ref } from "vue";
import HelloWorld from "./components/helloWold.vue";
export default {
  components: { HelloWorld },
  name: "app",
  setup() {
    let msg = ref("我是大帅哥");
    let age = ref(20);
    let user = {
      IdCare: 123124,
      addr: "湖南省",
      price: 20000,
    };
    let vv = ref(0);
    // let vv;

    function changeNum() {
      // age.value += 2;
      this.age += 2;
      console.log(age);
      // RefImpl {__v_isShallow: false, dep: Set(1), __v_isRef: true, _rawValue: 22, _value: 22}
      // dep: Set(1) {ReactiveEffect}
      // __v_isRef: true
      // __v_isShallow: false
      // _rawValue: 22
      // _value: 22
      // value: 22
      // [[Prototype]]: Object

      // RefImpl 类型的数据表示响应式数据统称为 ref数据
    }

    function btnVal(val) {
      console.log("子组件传来的参数...", val);
      vv.value = ref(val);
    }

    return {
      msg,
      age,
      user,
      changeNum,
      btnVal,
      vv,
    };
  },
};
</script>

<style>
</style>
